<template>
  <div>
    <Echart :options="options" id="centreLeft1Chart" height="400px" width="260px"></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
export default {
  data() {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    cdata: {
      handler(newData) {
        this.options = {
          title: {
          text: 'CPU占有率',
          bottom:100,
          left:'center',
          textStyle: {
      fontSize: 30
    },
          },
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          series: [
            {
              name: 'Pressure',
              type: 'gauge',
              progress: {
                show: true
              },
              center:['50%', '40%'],
              detail: {
                valueAnimation: true,
                formatter: '{value}'
              },
              data: [
                {
                  value: '60',
                  name: ''
                }
              ]
            }
          ]
        }
      },
      immediate: true,
      deep: true
    }
  }
};
</script>

<style lang="scss" scoped></style>